<template>
     <div class="contalner">
        <div id="sideBar">
            <u1>
                <l1>
                    <router-link to="/user/profile">个人信息</router-link>
                </l1>
                <br />
                <l1>
                    <router-link to="/user/settings">用户设置</router-link>
                </l1>
            </u1>
        </div>
        <div class="main-body">
            <router-view></router-view>
        </div>
    </div> 
    
</template>
<script>
// import { def } from '@vue/shared';

export default {}
</script>
<style scoped>
 .contalner{
    display:flex;
    width: 500px;
    height: 300px;
 }
 #sideBar{
    width:200px;
    height: 300px;
    background:rgb(47, 255, 220);  
 }
 #sideBar li {
    list-style: none;
 }
 #sideBar li a{
    display: block;
    width: 300px;
    height: 300px;
    line-height: 40px;
    text-decoration: none;
    color:rgb(0, 255, 191);
 }
 #sidebar li a.router-link-active{
    background: black;
 }
 .main-body {
   flex: 1;
    width: 200px;
    height:300px;
    background:rgb(0, 255, 255);
 }
</style>